The :has() pseudo-class in CSS allows you to select elements that contain specific descendants. You can use it to target a <div> that contains an <img> element and apply custom styles.

Key Points

1
:has() selects elements based on their descendants or children.
2
You can combine :has() with other selectors for more precise targeting.
3
This pseudo-class is particularly useful for styling parent elements depending on their child elements.

Example: Style <div> Containing an Image

In this example, only the <div> that contains an <img> element receives the border and background styles, while other <div> elements remain unchanged.

Best Practices

1
Use :has() to style containers based on their child elements dynamically.
2
Check browser compatibility, as older browsers may not fully support :has().
3
Combine with transitions for smooth visual effects when elements change state.
4
Avoid overusing :has() for performance-critical layouts, as it may increase rendering complexity.

Difficulty: 6/10

Topics: CSS :has() selector, dynamic content targeting, selector performance

Scenario Questions

0-2 years experience

1
How would you write a CSS rule to style a div only if it contains an img element inside it?
2
What happens if you try to use :has() to select a div that contains an image with class 'avatar'?

2-5 years experience

1
Our card component sometimes doesn't get the highlighted border even when it has an image — we're using :has() but it's not working in older browsers. How would you debug and fix this?
2
A designer wants all product cards with images to have a shadow, but we're seeing inconsistent behavior on mobile. How would you investigate whether :has() is the right tool here?

5-8 years experience

1
We're using :has() to conditionally style containers with media elements, but performance is degrading on pages with 200+ cards. How would you optimize this without resorting to JS?
2
The design system uses :has() to apply hover effects to containers with buttons, but it breaks when buttons are conditionally rendered via React. How do you reconcile dynamic content with static CSS selectors?

8+ years experience

1
We're migrating from a legacy JS-based component system to pure CSS-driven styling using :has(), but we still support IE11 in enterprise contracts. How would you architect a migration strategy that balances modern CSS with legacy constraints?
2
Our CSS-in-JS library doesn't support :has() in SSR. How would you design a cross-team solution to ensure consistent styling between server-rendered and client-rendered components without introducing hydration mismatches?

Follow-up Questions

❓What happens if the image is loaded dynamically after the page renders?
❓How would you debug this if :has() isn't working in a specific browser?
❓Could this selector cause layout thrashing or performance issues on a large page?